<template>
  <div class="code">
  <van-nav-bar title="取餐码" @click-left="onClickLeft">
    <template #left>
      <van-icon name="cross" color="#aaa" size="20"  />
    </template>
  </van-nav-bar>
  <div class="box">
    <p>取餐码：<span class="blue-num">{{ mealNum }}</span> </p>
    <p class="text_2346X1">{{ userName }}, 请扫码取餐</p>
    <img src="../../../public/images/mealcode.png" class="image_484X1">
    <van-cell title="分享餐码给好友" @click="showShare = true" class="text_2347X1" />
    <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
  </div>
</div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

// 定义取餐码
const mealNum = ref(0)
// 定义用户名(实际需要获取用户名)
const userName = ref('piu先生')
// 跳到支付完成（订单详情）
const onClickLeft = () => router.push('cart/payComplete')



// 分享面板
const showShare = ref(false);
const options = [
  { name: '微信', icon: 'wechat' },
  { name: '微博', icon: 'weibo' },
  { name: '复制链接', icon: 'link' },
  { name: '分享海报', icon: 'poster' },
  { name: '二维码', icon: 'qrcode' },
];

const onSelect = (option) => {
  showToast(option.name);
  showShare.value = false;
};


</script>

<style lang="scss" scoped>
.code {
  background-color: #f8f8f8;
  height: 100vh;

  .van-nav-bar {
    width: 375px;
    height: 44px;
    top: 20px;
    color: rgba(56, 56, 56, 1);
    background-color: rgba(255, 255, 255, 1);
    font-size: 18px;
    line-height: 150%;
    text-align: center;
    font-weight: bold;
  }

  .box {
    width: 375px;
    height: 395px;
    padding-top: 74px;
    color: rgba(80, 80, 80, 1);
    background-color: rgba(255, 255, 255, 1);
    font-size: 18px;
    line-height: 150%;
    text-align: center;

    .blue-num {
      color: skyblue;
    }

    .text_2346X1 {
      width: 132px;
      height: 21px;
      padding-left: 122px;
      top: 144px;
      color: rgba(56, 56, 56, 1);
      font-size: 14px;
      line-height: 150%;
      text-align: left;
    }

    .image_484X1 {
      width: 155px;
      height: 155px;
      left: 110px;
      margin-top: 41px;
    }

    .text_2347X1 {
      width: 151px;
      height: 40px;
      margin-left: 112px;
      margin-top: 20px;
      color: rgba(144, 192, 239, 1);
      box-shadow: rgba(144, 192, 239, 1) solid 1px;
      border-radius: 4px;
      font-size: 14px;
      text-align: center;
      border: 1px solid rgba(144, 192, 239, 1);
    }
  }
}

</style>